Zach’s ugly mug (his face) Zach Leatherman

Introducing Eleventy, a new Static Site Generator

February 12, 2018


Eleventy is a new static site generator.

If you’re not familiar with static site generators and their benefits, check out this great Smashing Magazine post: Why Static Site Generators Are The Next Big Thing from @biilmann.

Another static site generator? Yes. But why? Fair question.

Eleventy was created for three reasons:

  • Flexibility
  • Betting on JavaScript
  • Not a JavaScript Framework

Flexibility

Templating engine flexibility

Eleventy allows you to mix and match templating engines to allow easy migration of existing content. Your content templates can use a different templating engine than your layout files!

Linda is a web developer that does client work (get that money, Linda). Linda maintains a set of cross-project docs that she delivers alongside her front end components and templates. Linda has coded her docs using the Liquid templating engine in Jekyll. Now Linda has a client that wants her to deliver her components as Mustache templates. Easy. Linda switches from Jekyll to Eleventy because Eleventy can do both side-by-side. Good job, Linda.

Static Site Generator staticgen.com Rating Templating Engine
Jekyll #1 Liquid
Hugo #2 Go Templates
Hexo #3 EJS, Pug
Gatsby #4 React.js

Eleventy currently supports:

Directory Structure Flexibility

Eleventy wants to work with your project’s existing directory structure. We don’t require your content files to live in a _posts directory or a scaffold or source folder (unless you want them to). You tell Eleventy where your files are and we’ll work with you.

Just running eleventy will process files in the current directory and output to a _site folder. Customize this with --input and --output.

Finds files in current directory and outputs to a _site folder

eleventy

Finds files in src directory and outputs to a _gh_pages folder

eleventy --input=src --output=_gh_pages

Finds files in current directory and outputs to current directory

eleventy --input=. --output=.

I only want to transform one file

Eleventy can work as a small utility function to do one-off files too. This will transform README.md into README.html.

eleventy --input=README.md --output=.

Bet on JavaScript

Always bet on JavaScript. JavaScript gives you access to npm. The npm ecosystem is large. Crazy large. And it’s only growing in popularity. According to modulecounts.com, npm has almost three times the modules of its second place competitor, Maven Central (Java). When you want to add functionality, it’s a good bet that a module exists on npm.

Static Site Generator Language Module Count
Jekyll Ruby ~140,000 on rubygems.org
Hugo Go ~20,000 on Gopm
Hexo JavaScript ~580,000 on npm
Gatsby JavaScript ~580,000 on npm

Eleventy is not a JavaScript Framework

While Eleventy uses JavaScript in node.js to transform templates into content, importantly (by default) it does not recommend nor force your HTML to include any Eleventy-specific client-side JavaScript. This is a core facet of the project’s intent and goals. We are not a JavaScript framework. We want our content decoupled as much as possible from Eleventy altogether, and because Eleventy uses templating engines that are Eleventy-independent, it gets us much closer to that goal.

We may include some form of project-specific client-side JavaScript in the future but it will be opt-in only and not a project default. Of course, you may include your own project’s client-side JavaScript at the pleasure of your use case and requirements.

Just a fair warning—always analyze the output of static site generators, especially ones that are tightly coupled to JavaScript frameworks. Most JavaScript frameworks include opinionated client-side JavaScript, even when using server-side rendering. Those libraries can be hefty, sometimes blocking your critical path or causing unnecessarily network congestion in your critical path with preload. Performance is critical. Static files can offer amazing performance. To maintain that performance edge, Eleventy allows you to have full control over what and how JavaScript is included in your content.

Try it out!

I hope you’ll give Eleventy a try! Install it!

npm install -g @11ty/eleventy

Check out the tutorials on 11ty.dev. Let me know what you like or don’t like about it! I’d love to hear your feedback.

One of the smallest but nicest things you can do for the project is to star it on GitHub. The big giant list of static site generators on staticgen.com is ordered by GitHub stars, so that will help our ranking out a lot. Thank you!


< Newer
Web Fonts are ▢▢▢ Rocket Science
Older >
SmashingConf London 2018

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://fontawesome.com/Font Awesome and the creator/maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 83 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)